<template>
	<view class="content">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
				labelPosition="top"
				labelWidth="auto"
				ref="uForm"
		>
			<u-form-item
					label="名称："
					borderBottom
					required
			>
				<u--input
						
						v-model="form.name"
						placeholder="请填写名称"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="序号："
					borderBottom
					required
			>
				<u--input
				
						v-model="form.xuhao"
						placeholder="请填写序号"
						border="none"
				></u--input>
			</u-form-item>
		</u--form>
		<view class="categoryBox" v-for="(item,index) in form.category">
			<u--form
					labelPosition="left"
					labelWidth="auto"
			>
				<u-form-item
						label="规格名称："
						borderBottom
						required
				>
					<u--input
							
							v-model="item.name"
							placeholder="请填写规格名称"
							
					></u--input>
				</u-form-item>
				<u-form-item
						label="进货："
						borderBottom
						required
				>
					<u--input
					
							v-model="item.jinhuoshu"
							placeholder="请填写进货数"
							
					></u--input>
				</u-form-item>
				<u-form-item
						label="出货："
						borderBottom
						required
				>
					<u--input
					
							v-model="item.chuhuoshu"
							placeholder="请填写出货数"
							
					></u--input>
				</u-form-item>
				<u-form-item
						label="库存："
						borderBottom
						required
				>
					<u--input
					
							v-model="item.kucun"
							placeholder="请填写库存数"
							
					></u--input>
				</u-form-item>
				<u-form-item
						label="成本："
						borderBottom
						required
				>
					<u--input
					
							v-model="item.chengben"
							placeholder="请填写成本"
							
					></u--input>
				</u-form-item>
			</u--form>
			<view class="del" @click="del(index)">
				删除此规格
			</view>
		</view>
		<view class="add" @click="add">
			添加规格
		</view>
		<view style="height: 300upx;">
			
		</view>
		<view class="save" @click="save">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					name:'',
					xuhao:'',
					category:[
						{name:'',chengben:'',jinhuoshu:'',chuhuoshu:'',kucun:''},
					],
					jilu:[
						{content:'',date:''}
					]
				},
			}
		},
		onLoad(options) {
			if(options.id){
				this.form = uni.getStorageSync('list').filter(item=>{
					return item.id == options.id
				})[0]
			}
		},
		methods: {
			del(index){
				let that= this
				uni.showModal({
					content:"是否删除此规格？",
					showCancel:true,
					success(res) {
						if(res.confirm){
							that.form.category.splice(index,1)
						}
					}
				})
			},
			add(){
				this.form.category.push({name:'',chengben:'',jinhuoshu:'',chuhuoshu:'',kucun:''})
			},
			save(){
				if(!this.form.name){
					uni.showToast({
						title: '请填写名称',
						duration:3000,
						icon:'none'
					});
					return
				}
				let list = uni.getStorageSync('list')||[]
				if(this.form.id){
					list = list.map(item=>{
						if(item.id == this.form.id){
							item = this.form
							
						}
						return item
					})
					console.log(list,'list')
				} else {
					if(list.length){
						this.form.id = list[list.length-1].id+1
						list.push(this.form)
					} else {
						this.form.id = 1
						list.push(this.form)
					}
				}
				uni.setStorageSync('list',list)
				uni.showToast({
					title:"保存成功",
					duration:2000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},2000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 30upx;
	}
	.categoryBox{
		border-radius: 20upx;
		padding: 30upx;
		margin-top: 40upx;
		box-shadow: 4upx 4upx 8upx rgba(0, 0, 0, 0.3);
	}
	.del{
		line-height: 60upx;
		text-align: center;
		border-radius: 30upx;
		color: white;
		width: 560upx;
		margin: 0 auto;
		margin-top: 30upx;
		background-color: $uni-color-error;
	}
	.add{
		line-height: 60upx;
		text-align: center;
		border-radius: 8upx;
		color: white;
		width: 690upx;
		margin: 0 auto;
		margin-top: 30upx;
		background-color: $uni-color-primary;
	}
	.save{
		line-height: 80upx;
		text-align: center;
		border-radius: 40upx;
		color: white;
		position: fixed;
		bottom: 80upx;
		left: 30upx;
		width: 690upx;
		background-color: $uni-color-primary;
	}
</style>
